<template>
	<div id="Report">
		<!--view-->
		<view-box ref="viewBox">
			<x-header :left-options="{showBack: false}" title="店铺报表" class="header">
				<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
			</x-header>
			<div class="main">
				<div class="item">
					<div class="user-title">
						<h2 class="txt">拍品报表</h2>
						<a href="javascript:;" class="more"><i class="icon-right2"></i></a>
					</div>
					<div class="list">
						<flexbox :gutter="0" wrap="wrap">
							<flexbox-item :span="1/2" class="sitem">
								<p>今日发布件数：<span>0</span></p>
							</flexbox-item>
							<flexbox-item :span="1/2" class="sitem">
								<p>累计发布件数：<span>5</span></p>
							</flexbox-item>
							<flexbox-item :span="1/2" class="sitem">
								<p>今日成拍件数：<span>0</span></p>
							</flexbox-item>
							<flexbox-item :span="1/2" class="sitem">
								<p>累计成拍件数：<span>5</span></p>
							</flexbox-item>
						</flexbox>
					</div>
				</div>
				<div class="item">
					<div class="user-title">
						<h2 class="txt">销售报表</h2>
						<a href="javascript:;" class="more"><i class="icon-right2"></i></a>
					</div>
					<div class="list">
						<flexbox :gutter="0" wrap="wrap">
							<flexbox-item :span="1/2" class="sitem">
								<p>今日已付款：<span>0</span></p>
							</flexbox-item>
							<flexbox-item :span="1/2" class="sitem">
								<p>累计已付款：<span>568</span></p>
							</flexbox-item>
							<flexbox-item :span="1/2" class="sitem">
								<p>待付款：<span>0</span></p>
							</flexbox-item>
							<flexbox-item :span="1/2" class="sitem">
								<p>笔数：<span>5</span></p>
							</flexbox-item>
							<flexbox-item :span="1/2" class="sitem">
								<p>待发货：<span>0</span></p>
							</flexbox-item>
							<flexbox-item :span="1/2" class="sitem">
								<p>笔数：<span>5</span></p>
							</flexbox-item>
							<flexbox-item :span="1/2" class="sitem">
								<p>待确认：<span>1</span></p>
							</flexbox-item>
							<flexbox-item :span="1/2" class="sitem">
								<p>笔数：<span>1</span></p>
							</flexbox-item>
						</flexbox>
					</div>
				</div>
				<div class="item">
					<div class="user-title">
						<h2 class="txt">访客报表</h2>
						<a href="javascript:;" class="more"><i class="icon-right2"></i></a>
					</div>
					<div class="list">
						<flexbox :gutter="0" wrap="wrap">
							<flexbox-item :span="1/2" class="sitem">
								<p>今日访问人数：<span>35</span></p>
							</flexbox-item>
							<flexbox-item :span="1/2" class="sitem">
								<p>累计访问人数：<span>1580</span></p>
							</flexbox-item>
							<flexbox-item :span="1/2" class="sitem">
								<p>今日访问次数：<span>264</span></p>
							</flexbox-item>
							<flexbox-item :span="1/2" class="sitem">
								<p>累计访问次数：<span>5864</span></p>
							</flexbox-item>
						</flexbox>
					</div>
				</div>
				<div class="item">
					<div class="user-title">
						<h2 class="txt">粉丝报表</h2>
						<a href="javascript:;" class="more"><i class="icon-right2"></i></a>
					</div>
					<div class="list">
						<flexbox :gutter="0" wrap="wrap">
							<flexbox-item :span="1/2" class="sitem">
								<p>今日增长粉丝：<span>7</span></p>
							</flexbox-item>
							<flexbox-item :span="1/2" class="sitem">
								<p>累计粉丝：<span>29</span></p>
							</flexbox-item>
						</flexbox>
					</div>
				</div>
			</div>
		</view-box>
		<bottom></bottom>
	</div>
</template>

<script>
	import bottom from '../comp/Footer';
	import $ from 'jquery';
	import {
		XHeader,
		Flexbox,
		FlexboxItem,
		ViewBox
	} from 'vux';

	export default { //变量
		data() {
			return {
				auction_goods: '',
				auctioned_goods: '',
				pay_money: '',
				order: '',
				shop: ''
			}
		},
		components: {
			bottom,
			XHeader,
			Flexbox,
			FlexboxItem,
			ViewBox
		},
		activated() {
			this.getshopReport();
		},
		methods: {
			getshopReport: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/member/shop_report.json',
					data: ''
				}).then((result) => {
					console.log(result);
					this.auction_goods = result.data.auction_goods;
					this.auctioned_goods = result.data.auctioned_goods;
					this.pay_money = result.data.pay_money;
					this.order = result.data.order;
					this.shop = result.data.shop;
				}).catch((err) => {
					console.log(err);
				})
			},
			back: function() {
				window.history.go(-1);
			}

		}
	}
</script>

<style scoped>
	#Report {
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		position: absolute;
	}

	.header {
		background-color: #fff !important;
	}
	/*统一标题*/

	.user-title {
		position: relative;
		padding: 0 0.26666rem;
		height: 1.30666rem;
		line-height: 1.30666rem;
		overflow: hidden;
	}

	.user-title:after {
		content: " ";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 200%;
		height: 1px;
		border-bottom: 1px solid #f3f3f3;
		transform-origin: 0 0;
		transform: scaleX(0.5);
	}

	.user-title .txt {
		float: left;
		font-size: 0.37333rem;
		display: inline-block;
	}

	.user-title .more {
		float: right;
		font-size: 0.29333rem;
		color: #aaa;
	}

	.user-title .more i {
		float: right;
		margin: 0.45333rem 0;
		margin-left: 0.16rem;
	}

	.main {
		margin: 0.26666rem 0;
	}

	.main .item {
		margin-bottom: 0.26666rem;
		background-color: #fff;
	}

	.main .item .list {}

	.main .item .list .sitem {
		padding: 0.42666rem 0;
		padding-left: 0.26666rem;
		font-size: 0.34666rem;
		color: #777;
	}

	.main .item .list .sitem span {
		color: #333;
	}
</style>
<style>

</style>
